<template>
  <div class="page">
    <m-header
      class="nm-titl"
      title="幸运转盘"
      :canback="Boolean(0)"
    ></m-header>

    <div class="tab-list">
      <div
        class="tab-item"
        :class="index===tabIndex?'active btn-origin':''"
        v-for="(item,index) in tabList"
        :key="index"
        @click="selectTab(index)"
      >{{item.title}}</div>
    </div>
    <section
      class="body sudoku index-bg"
    >
      <div class="container" v-if='tabIndex===0&&dialData'>
        <img
          src="../../assets/images/sudoku_top.png"
          class='sudoku-top'
          alt=""
        >
        <div class="sudoku-main">
          <img
            src="../../assets/images/sudoku_bg.png"
            class="sudoku-bg"
            alt=""
          >
          <div class="sudoku-box">
            <template v-for="(item,index) in dialData.list">
              <div
                class="sudoku-box-item"
                v-if="index===4"
                :key="index"
                @click="run"
              >
                <div class="box center">

                </div>
              </div>
              <div
                class="sudoku-box-item"
                :key="index>3?index+1:index"
              >
                <div
                  class="box"
                  :class="{active:sudokuIndex===index}"
                >
                  <img
                    :src="api+item.rewardimg"
                    alt=""
                    class="img"
                  >
                  <div class="text">
                    {{item.title}}

                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
        <!-- <div class="dial">
        <div
          class="bg"
          :style="'-webkit-transform:rotate('+rotate+'deg);-webkit-transition:all '+time+'s ease-in-out;'"
        >
          <img
            class="img"
            src="../../assets/images/gzlz/zhuanpan_bg2.png"
            alt=""
          >
          <div class="item item1">
            <span>{{dialData?dialData.list[0].title:'暂无'}}</span>
            <img
              class="icon"
              :src="dialData && dialData.list[0].rewardimg?api+dialData.list[0].rewardimg:defaultSrc"
              alt=""
            >
          </div>
          <div class="item item2">
            <span>{{dialData?dialData.list[1].title:'暂无'}}</span>
            <img
              class="icon"
              :src="dialData && dialData.list[1].rewardimg?api+dialData.list[1].rewardimg:defaultSrc"
              alt=""
            >
          </div>
          <div class="item item3">
            <span>{{dialData?dialData.list[2].title:'暂无'}}</span>
            <img
              class="icon"
              :src="dialData && dialData.list[2].rewardimg?api+dialData.list[2].rewardimg:defaultSrc"
              alt=""
            >
          </div>
          <div class="item item4">
            <span>{{dialData?dialData.list[3].title:'暂无'}}</span>
            <img
              class="icon"
              :src="dialData && dialData.list[3].rewardimg?api+dialData.list[3].rewardimg:defaultSrc"
              alt=""
            >
          </div>
          <div class="item item5">
            <span>{{dialData?dialData.list[4].title:'暂无'}}</span>
            <img
              class="icon"
              :src="dialData && dialData.list[4].rewardimg?api+dialData.list[4].rewardimg:defaultSrc"
              alt=""
            >
          </div>
          <div class="item item6">
            <span>{{dialData?dialData.list[5].title:'暂无'}}</span>
            <img
              class="icon"
              :src="dialData && dialData.list[5].rewardimg?api+dialData.list[5].rewardimg:defaultSrc"
              alt=""
            >
          </div>
          <div class="item item7">
            <span>{{dialData?dialData.list[6].title:'暂无'}}</span>
            <img
              class="icon"
              :src="dialData && dialData.list[6].rewardimg?api+dialData.list[6].rewardimg:defaultSrc"
              alt=""
            >
          </div>
        </div>
        <img
          class="shot"
          src="../../assets/images/gzlz/icon_zhizheng.png"
          alt=""
        >
      </div> -->
        <p class="data">
          <span>购物券:<i>{{dialData?dialData.credit2:0}}</i></span>
          <span>加速卡:<i>{{dialData?dialData.speed_card:0}}</i></span>
        </p>
        <p class="data">
          <span>当前抽奖券：<i>{{dialData?dialData.total:0}}</i></span>
          <span>可抽奖次数：<i>{{dialData?dialData.lottery_times:0}}</i></span>
        </p>

        <div
          class="btn btn-origin"
          @click="run"
        >立即抽奖</div>

        <div class="tips">
          <p class="title">活动规则：</p>
          <p class="content">
            <span
              v-for="(item,index) in ruleArr"
              :key="index"
            >{{item}}<br></span>
          </p>
        </div>
      </div>
      <div class="container" v-if='tabIndex===1&&mineConfig'>
        <div class="game-box">
          <img
            src="../../assets/images/top.png"
            class="top"
            alt=""
          >
          <img
            src="../../assets/images/buy_n.png"
            class="buy_n"
            alt=""
          >
          <img
            src="../../assets/images/buy_ns.png"
            class="buy_ns"
            alt=""
          >
          <div class="mine-box-list">
            <div
              class="mine-box"
              v-for='(box,index) in mineConfig.lattice_num.value'
              :key="box.key"
              @tap="onClickMineBox(box,index)"
            >
              <img
                :src="box.imgUrl"
                class="img"
                alt=""
              >
              <div class="mine-text">{{index+1}}</div>
              <!-- <img class="mine-text" src="../../assets/images/btm_bg.png" alt=""> -->
            </div>
          </div>
        </div>
        >
        <p class="data">
          <span>购物券:<i>{{dialData?dialData.credit2:0}}</i></span>
          <span>加速卡:<i>{{dialData?dialData.speed_card:0}}</i></span>
        </p>
        <p class="data">
          <span>当前抽奖券：<i>{{dialData?dialData.total:0}}</i></span>
          <span>可抽奖次数：<i>{{dialData?dialData.lottery_times:0}}</i></span>
        </p>
        <div
          class="btn btn-origin mine-btn"
          @click="getMineConfig"
        >重置奖品</div>

        <div class="tips">
          <p class="title">活动规则：</p>
          <p class="content">
            <span
              v-for="(item,index) in ruleArr"
              :key="index"
            >{{item}}<br></span>
          </p>
        </div>
      </div>
    </section>
    <m-load ref="load"></m-load>
    <m-Footer></m-Footer>
  </div>
</template>
<script>
  import { Owner } from '@/server/server.js';
  import { mapGetters } from 'vuex';
  import { Load } from '@/assets/commonjs/utils.js';
  import titUrl from '../../assets/images/new/tit4.png'

  const imgUrl = require('@/assets/images/box_2.png')
  export default {
    data() {
      return {
        titUrl,
        tabList: [{
          title: '幸运大转盘'
        }, {
          title: '开盒子中大奖'
        }],
        tabIndex: 0,
        mineConfig: null,
        rotate: 0,
        sudokuIndex: 0,
        sudokuArr: [0, 1, 2, 4, 7, 6, 5, 3],
        time: 0,
        dialData: null,
        defaultSrc: require('@/assets/images/gzlz/Icon_payment.png'),
        reward: null,
        ruleArr: null,
        flag: true
      }
    },
    mounted() {
      this.getDialList(this.uid);
      this.getMineConfig()
    },
    computed: {
      ...mapGetters(['uid', 'api'])
    },
    methods: {
      // 切换tab
      selectTab(index) {
        if (this.tabIndex != index) {
          this.tabIndex = index
        }
      },
      // 扫雷
      getMineConfig() {
        Owner.getMineConfig().then(res => {
          if (res.code == 1) {
            const config = {}
            res.data.config.forEach(item => {
              config[item.name] = item
            })
            let boxList = []
            for (let i = 0; i < config.lattice_num.value; i++) {
              const obj = {
                key: i + '1',
                imgUrl: imgUrl,
                isCheck: false
              }
              boxList.push(obj)
            }
            config.lattice_num.value = boxList
            this.mineConfig = JSON.parse(JSON.stringify(config))
          }
        })
      },
      // 点击雷
      onClickMineBox(box, index) {
        if (this.mineConfig.lattice_num.value[index].isCheck) {
          return
        }
        Load.loadStart(this);
        const param = {
          index
        }
        Owner.getMineLottery(param).then(res => {
          Load.loadEnd(this);
          this.getDialList(this.uid);
          if (res.code == 1) {
            this.$set(this.mineConfig.lattice_num.value[index], 'imgUrl', this.api + res.data.img)
            this.$set(this.mineConfig.lattice_num.value[index], 'isCheck', true)
            mui.alert(res.data.remark);
          } else {
            mui.alert(res.msg);
          }
        }).catch(erro => {
          Load.loadEnd(this);
        })
      },
      /**
       * 开始抽獎
       */
      run() {
        if (this.flag) {
          if (this.dialData.total == 0) {
            mui.toast('當前沒有抽獎次數了哦~');
            return;
          }
          this.flag = true;
          this.time = 0;
          this.rotate = 0;
          let count = 0
          let prize = 0
          this.sudokuIndex = 0
          Load.loadStart(this);
          this.getReward(this.uid, data => {
            Load.loadEnd(this);
            this.$nextTick(() => {
              this.flag = false;
              // this.dialData ? this.dialData.total = this.dialData.total - 1 : '';
              this.getDialList(this.uid);
            })
            prize = data.reward_id - 1
            // this.dialData.list.forEach((item, index) => {
            //   if (item.id === data.reward_id) {
            //     if (index)
            //   }
            // })
            const timer = setInterval(() => {
              if (count === 7) {
                count = 0
              } else {
                count++
              }
              this.sudokuIndex = this.sudokuArr[count]
            }, 100)
            setTimeout(() => {
              clearInterval(timer)
              count = 0
              const timerId = setInterval(() => {
                count++
                this.sudokuIndex = this.sudokuArr[count]
                if (prize === this.sudokuIndex) {
                  clearInterval(timerId)
                  this.flag = true
                  setTimeout(() => {
                    mui.alert(data.remark)
                  }, 10)
                }
              }, 200)
            }, 2400)
            // console.log(data.reward_id)
            // setTimeout(() => {
            //   this.time = 3;
            //   this.rotate = 1080 + (385 - data.reward_id * 50);
            // }, 100)
            // setTimeout(() => {
            //   mui.alert(data.remark);
            //   this.flag = true;
            // }, 3500);
          })
        }
      },
      /**
       * 获取獎品列表
       */
      getDialList(id) {
        Owner.getDialList({ id }).then(res => {
          if (res.code == 1) {
            this.dialData = res.data;
            this.setRule(this.dialData.rule)
          }
        })
      },
      /**
       * 获取獎品结果
       */
      getReward(id, callback) {
        Owner.getReward({ id }).then(res => {
          if (res.code == 1) {
            callback(res.data)
          } else {
            mui.toast(res.msg + '，请於客服反饋！');
          }
        })
      },
      /**
       * 规则
       */
      setRule(string) {
        if (string) {
          this.ruleArr = string.split(';');
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  @import "~link-less";
  .page {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  .nm-titl {
    padding: 20px 0 30px;
  }

  .tab-list {
    display: flex;
    align-items: center;
    justify-content: space-around;
    .tab-item {
      // flex: 1;
      width: 280px;
      height: 50px;
      font-size: 0;
      &:first-of-type {
        background: url("../../assets/images/new/tab1.png") no-repeat;
        background-size: 100%;
        &.active {
          background-image: url("../../assets/images/new/tab1-active.png");
        }
      }
      &:last-of-type {
        background: url("../../assets/images/new/tab2.png") no-repeat;
        background-size: 100%;
        &.active {
          background-image: url("../../assets/images/new/tab2-active.png");
        }
      }
    }
  }
  .game-box {
    width: 600px;
    margin-top: 220px;
    position: relative;
    .top {
      position: absolute;
      top: -270px;
      left: 50%;
      transform: translateX(-50%);
      width: 750px;
      z-index: 99;
    }
    .buy_n {
      width: 50px;
      position: absolute;
      left: -50px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 99;
    }
    .buy_ns {
      width: 50px;
      position: absolute;
      right: -50px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 99;
    }
    .mine-box-list {
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-wrap: wrap;
      z-index: 999;
      position: relative;
      .mine-box {
        width: 180px;
        height: 180px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        // background-image: url("../../assets/images/envelopes.png");
        // background-size: 100% 100%;
        // background-color: #fff;
        position: relative;
        // background-color: rgba(0,0,0,.3);
        border-radius: 10px;
        // margin-bottom: 20px;
        .img {
          width: 120px;
          height: 120px;
          // position: absolute;
          // bottom: 20px;
          // left: 50%;
          // transform: translateX(-50%);
          // z-index: 99;
        }
        .mine-text {
          // position: absolute;
          bottom: 0;
          width: 180px;
          text-align: center;
          color: #ffffff;
          font-weight: 500;
          font-size: 36px;
        }
      }
    }
  }
  .mine-btn {
    margin-top: 50px;
    // width: 400px !important;
  }
  .container {
    .display-flex();
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    position: relative;
  }
  .body {
    // background-color: @bg-color;
    padding: @padding-primary 50px;
    // .display-flex();
    // flex-direction: column;
    // align-items: center;
    // box-sizing: border-box;
    // position: relative;
    &.sudoku {
      padding: 0;
      .sudoku-top {
        width: 750px;
        margin-top: 50px;
      }
    }
    .sudoku-main {
      margin-top: 10px;
      position: relative;
    }
    .sudoku-bg {
      width: 750px;
      height: 671px;
    }
    .sudoku-box {
      width: 510px;
      height: 510px;
      position: absolute;
      left: 50%;
      bottom: 30px;
      transform: translateX(-50%);
      // background-color: #fff;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      // align-content: space-around;
      // justify-content: center;
      // align-items: flex-start;
    }
    .sudoku-box-item {
      background-color: #eb9198;
      width: 162px;
      height: 159px;
      // padding: 8px;
      padding-top: 0;
      box-sizing: border-box;
      border-radius: 10px;
      .box {
        background-color: #fff;
        width: 100%;
        // height: 100%;
        height: 149px;
        border-radius: 10px;
        padding: 10px;
        box-sizing: border-box;
        text-align: center;
        position: relative;
        .img {
          width: 80px;
          height: 80px;
        }
        &.center {
          background-image: url("../../assets/images/sudoku_btn.png");
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center;
        }
        .text {
          font-size: 24px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
        }
        &.active {
          background-color: #fce36f;
        }
        // &.active::after {
        //   content: "";
        //   width: 162px;
        //   height: 149px;
        //   border-radius: 10px;
        //   position: absolute;
        //   top: 0;
        //   bottom: 0;
        //   left: 0;
        //   right: 0;
        //   background-color: #FCE36F;
        // }
      }
      // margin: 5px;
    }
    // .dial {
    //   height: 544px;
    //   border-radius: 50%;
    //   position: relative;
    //   margin-top: 20px;
    //   .shot {
    //     position: absolute;
    //     top: 50%;
    //     left: 50%;
    //     .transform(translate(-50%, -50%));
    //     width: 100px;
    //   }
    //   .bg {
    //     height: 544px;
    //     position: relative;
    //     .img {
    //       height: 100%;
    //     }
    //     .item {
    //       position: absolute;
    //       .display-flex();
    //       flex-direction: column;
    //       justify-content: center;
    //       align-items: center;
    //       width: fit-content;
    //       font-size: 24px;
    //       font-weight: 700;
    //       .icon {
    //         width: 100px;
    //         height: 100px;
    //       }
    //     }
    //     .item1 {
    //       top: 70px;
    //       right: 160px;
    //       .transform(rotate(30deg));
    //     }
    //     .item2 {
    //       top: 160px;
    //       right: 90px;
    //       .transform(rotate(80deg));
    //     }
    //     .item3 {
    //       top: 280px;
    //       right: 110px;
    //       .transform(rotate(130deg));
    //     }
    //     .item4 {
    //       top: 355px;
    //       right: 220px;
    //       .transform(rotate(180deg));
    //     }
    //     .item5 {
    //       bottom: 110px;
    //       left: 110px;
    //       .transform(rotate(230deg));
    //     }
    //     .item6 {
    //       bottom: 220px;
    //       left: 85px;
    //       .transform(rotate(280deg));
    //     }
    //     .item7 {
    //       top: 75px;
    //       left: 150px;
    //       .transform(rotate(330deg));
    //     }
    //   }
    // }
    .data {
      .display-flex();
      width: 100%;
      justify-content: space-between;
      width: 550px;
      margin: 0 auto;
      font-size: 24px;
      padding: 10px 0;
      span {
        flex: 1;
        text-align: left;
      }
      i {
        color: #ffffff;
      }
    }
    .btn {
      width: 650px;
      color: #ffffff;
      margin-top: 20px;
    }
    .title {
      color: @primary-color;
      font-size: 32px;
      width: 100%;
      margin: 20px 0 30px;
    }
    .tips {
      width: 650px;
      padding: 30px;
      box-sizing: border-box;
      border-radius: 30px;
      background-color: @bg-card-color;
      margin-top: 20px;
    }
    .content {
      // text-indent: 40px;
      font-size: 24px;
      width: 100%;
      padding-left: @padding-primary;
    }
  }
</style>
